<template>
  <div @click="cardBtn" class="card">
    <div
      class="good-img"
      :style="{backgroundImage:'url(' +imgSrc+')'}"
    ></div>
    <div class="goods-item-content">
      <p class="item-name">{{name}}</p>
      <slot>
      </slot>
    </div>
  </div>
</template>
<script>
let imgurl = require('../../images/no-data.png')
export default {
  data() {
    return {

    };
  },
  methods:{
    cardBtn(){
      this.$emit('cardClick')
    }
  },
    props: {
	    imgSrc: {
	    	default: imgurl
        },
	    name: {
	    	default: ""
        }
    }
};
</script>
<style lang="less">
.card {
  width: 100%;
  background: white;
  position: relative;
  height: 2.74rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 2;
  .good-img {
    width: 2.32rem;
    height: 2.33rem;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .goods-item-content {
    flex: 1;
    position: relative;
    z-index: 2;
    background: white;
    height: 2.32rem;
    padding: 0.21rem 0.23rem 0.2rem 0.21rem;
    overflow: hidden;
    text-overflow: ellipsis;
    .item-name {
      font-size: 0.3rem;
      font-family: PingFang-SC-Light;
      color: rgba(51, 51, 51, 1);
      line-height: 0.39rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
    }
  }
}
</style>
